<!-- 试用期考核方案模板页面 -->
<template>
  <PageHeaderNew
    :title="title"
    :breadCrumb="breadCrumb"
    :isShowBtn="true"
    showBack
  >
  </PageHeaderNew>
  <div class="base-setting">
    <!-- <icon-font type="icon-undo" :size="32" /> | -->
    <div class="header">
      <div>
        <a-input-search
          :style="{ width: '320px' }"
          placeholder="请输入模板名称"
          search-button
        >
          <template #button-icon>
            <icon-search />
          </template>
        </a-input-search>
      </div>
      <div>
        <a-button
          type="primary"
          @click="add"
          :style="{
            marginRight: '10px'
          }"
          >新增模板
        </a-button>
      </div>
    </div>

    <TableTurn ref="tableTurn" :tableData="searchData" style="margin-top: 20px">
      <a-table-column :width="80">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>
      <a-table-column
        title="试用期考核方案模板名称"
        data-index="name"
      ></a-table-column>
      <a-table-column
        title="考核分数制"
        data-index="description"
      ></a-table-column>
      <a-table-column title="最新修改时间" data-index="isLegalPerson">
      </a-table-column>
      <a-table-column title="创建时间" data-index="status"></a-table-column>
      <a-table-column title="启用状态" data-index="status"></a-table-column>
      <a-table-column :width="200" title="是否为默认模板" dataIndex="required">
        <template #cell="{ record }">
          <a-switch
            :checked-value="1"
            :unchecked-value="2"
            v-model="record.required"
            @change="stateChange(record)"
          />
        </template>
      </a-table-column>
      <a-table-column title="操作" :width="200" fixed="right">
        <template #cell="{ record }">
          <a-space :size="0">
            <a-tooltip content="复制">
              <IconFont
                type="icon-fuzhi"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="copy(record)"
              />
            </a-tooltip>
            <a-tooltip content="编辑">
              <IconFont
                type="icon-edit"
                :size="26"
                :style="{
                  cursor: 'pointer'
                }"
                @click="edit(record)"
              />
            </a-tooltip>
            <a-tooltip content="删除" position="left">
              <a-popconfirm
                content="是否确认删除该条数据?"
                position="left"
                @ok="remove(record.id)"
              >
                <IconFont
                  type="icon-delete"
                  :size="26"
                  :style="{
                    cursor: 'pointer'
                  }"
                />
              </a-popconfirm>
            </a-tooltip>
          </a-space>
        </template>
      </a-table-column>
    </TableTurn>
    <FormTemplate
      :data="currRecord"
      ref="templateRef"
      :tab-code-list="tabCodeList"
    ></FormTemplate>
  </div>
</template>

<script lang="ts" setup>
import { useRouter } from 'vue-router';
import { useSetupFormStore } from '@/store';
// // import { GetControl } from '@/apis/management/base';
import { GetHumanTemplateList } from '@/apis/management/human/baseSetting/humanSetting';
import { cloneDeep } from 'lodash';
import { Message } from '@arco-design/web-vue';
import FormTemplate from './Components/FormTemplate/index.vue';

const props = withDefaults(
  defineProps<{
    // clientName: string; // 客户名称
    dataList: any; // 状态列表
  }>(),
  {}
);

const tableTurn = ref();
const router = useRouter();
const title = '试用期考核方案配置';
let templateRef = ref();

const store = useSetupFormStore();
const breadCrumb: string[] = [
  '人事',
  '基础设置',
  '试用期设置',
  '试用期考核方案配置'
];

const goDetail = (id: number, name: string) => {
  console.log('id', id);
  router.push({
    name: 'OrganizationSettingTemplate',
    query: { userId: id, name }
  });
};

let originData = ref(); // 储存原始数据
// 获取表数据
const searchData = async (page: any) => {
  try {
    const res = await GetHumanTemplateList({
      ...page
    });
    for (let i = 0; res.content.length > i; i++) {
      if (res.content[i].isLegalPerson == 2) {
        res.content[i].isLegalPerson = '否';
      } else {
        res.content[i].isLegalPerson = '是';
      }
      if (res.content[i].status == 2) {
        res.content[i].status = '禁用';
      } else {
        res.content[i].status = '启用';
      }
    }
    originData.value = cloneDeep(res.content);
    return Promise.resolve(res);
  } catch (error: unknown) {
    console.log('查询错:', error);
  }
};

// 储存当前数据
const currRecord: any = reactive({
  templateRequest: {},
  level: 1,
  information: [],
  list: {
    positionCollectionModel: [
      {
        componentModel: []
      }
    ]
  }
});

// 具体要展示哪种业务控件
const tabCodeList = [
  'allComponent',
  'baseComponent',
  'businessComponent',
  'humanComponent'
];

// 基础信息默认控件枚举
const baseSettingEnum: any = [];

// 默认模板组件，默认有两个
const defaultForm: any = [
  {
    componentModel: []
  },
  {
    componentModel: []
  }
];

// 点击新增模板按钮
const add = async () => {
  try {
    // const res = cloneDeep(await GetControl());
    // res.forEach((item: any) => {
    //   if (baseSettingEnum.includes(item.code)) {
    //     item.isMust = 1;
    //     item.required = 1;
    //     // defaultForm[0].componentModel.push(item);
    //   }
    // });
    // console.log(defaultForm);
    // store.templateType = 3; // 人员信息模板传3
    // currRecord.list.positionCollectionModel = defaultForm;
    // templateRef.value.fullScreen();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 点击编辑
const edit = (record: any) => {
  store.templateType = 3; // 人员信息模板传3
  currRecord.list = record;
  templateRef.value.fullScreen();
};

// 修改模板默认状态
const stateChange = async (record: any) => {
  try {
    // 获取更改状态之前的模板数据，并判断状态是否和当前的一样，如果一样则不能改成默认模板
    // const temp = originData.value.find((item: any) => item.id === record.id);
    // if (temp.required === 1) Message.error('必须拥有一个默认模板！');
    // else
    //   await PutOrganizationTemplateState({
    //     id: record.id,
    //     required: record.required
    //   });
    // templateRef.value.loadData();
  } catch (error: unknown) {
    console.log(error);
  }
};

// 删除(确定弹框没有UI)
const remove = async (id: any) => {
  // const res = await OrganizationPatternDelete({ id });
  // refresh();
  // return Promise.resolve(res);
};
const refresh = () => {
  tableTurn.value.loadData();
};
</script>

<style scoped lang="less">
.base-setting {
  padding: 10px 20px;
  &-warp {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
  }
  .header {
    display: flex;
    justify-content: space-between;
  }
}
.optionalSe {
  display: inline;
  cursor: pointer;
}
.newOrganization {
  float: right;
  margin: 20px 20px 0 0;
  color: #409eff;
  background-color: #ecf5ff;
  border: 1px solid #409eff;
  border-radius: 5px;
  justify-content: space-around;
}
.operation {
  display: flex;
  justify-content: end;
  p {
    margin: 0 10px;
    color: #3d7eff;
    cursor: pointer;
  }
  p:last-child {
    color: red;
  }
}
</style>
